<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景色过渡动画示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* 设置背景色过渡效果，持续0.5秒，使用ease缓动函数 */
            transition: background-color 0.5s ease;
            background-color: #f0f8ff; /* 初始背景色 - 淡蓝色 */
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            width: 100%;
            text-align: center;
        }

        h1 {
            margin-bottom: 20px;
            font-size: 2.5rem;
        }

        p {
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .theme-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 40px;
        }

        .theme-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            /* 按钮本身的过渡效果 */
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .theme-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .content-box {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            /* 内容区域的过渡效果 */
            transition: all 0.5s ease;
            margin-top: 20px;
        }

        .content-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* 预定义的背景色主题 */
        .theme-1 {
            background-color: #f0f8ff; /* 淡蓝色 */
        }

        .theme-2 {
            background-color: #fff0f5; /* 淡粉色 */
        }

        .theme-3 {
            background-color: #f0fff0; /* 淡绿色 */
        }

        .theme-4 {
            background-color: #fff8f0; /* 淡橙色 */
        }

        .theme-5 {
            background-color: #f5f0ff; /* 淡紫色 */
        }

        .theme-6 {
            background-color: #f0f0f0; /* 淡灰色 */
        }

        .code-block {
            background-color: #f8f8f8;
            border-radius: 5px;
            padding: 15px;
            margin-top: 20px;
            text-align: left;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
        }
    </style>
</head>
<body class="theme-1">
<div class="container">
    <h1>CSS背景色过渡动画示例</h1>
    <p>点击下面的按钮，查看背景色的平滑过渡效果。这个示例使用CSS的<code>transition</code>属性实现动画效果。</p>

    <div class="theme-buttons">
        <!-- 每个按钮通过JavaScript切换不同的背景主题 -->
        <button class="theme-btn" style="background-color: #e6f2ff; color: #0066cc;" onclick="changeTheme('theme-1')">淡蓝主题</button>
        <button class="theme-btn" style="background-color: #ffe6f2; color: #cc0066;" onclick="changeTheme('theme-2')">淡粉主题</button>
        <button class="theme-btn" style="background-color: #e6ffe6; color: #00cc66;" onclick="changeTheme('theme-3')">淡绿主题</button>
        <button class="theme-btn" style="background-color: #fff2e6; color: #cc6600;" onclick="changeTheme('theme-4')">淡橙主题</button>
        <button class="theme-btn" style="background-color: #f0e6ff; color: #6600cc;" onclick="changeTheme('theme-5')">淡紫主题</button>
        <button class="theme-btn" style="background-color: #f0f0f0; color: #666666;" onclick="changeTheme('theme-6')">淡灰主题</button>
    </div>

    <div class="content-box">
        <h2>CSS Transition 属性说明</h2>
        <p><code>transition</code> 是CSS3中的一个属性，用于在一定的时间内平滑地改变CSS属性的值[citation:1]。</p>

        <div class="code-block">
                <pre>/* transition 属性的基本语法 */
transition: property duration timing-function delay;

/* 示例 */
transition: background-color 0.5s ease-in-out;</pre>
        </div>

        <p>在上面的示例中，我们为body元素设置了<code>transition: background-color 0.5s ease;</code>，这意味着当背景色发生变化时，会有一个持续0.5秒的平滑过渡动画[citation:2]。</p>

        <h3>Transition 子属性：</h3>
        <ul style="text-align: left; max-width: 600px; margin: 0 auto;">
            <li><strong>transition-property</strong>: 指定要应用过渡效果的CSS属性名称[citation:1]</li>
            <li><strong>transition-duration</strong>: 指定过渡动画的持续时间[citation:1]</li>
            <li><strong>transition-timing-function</strong>: 指定过渡动画的速度曲线[citation:5]</li>
            <li><strong>transition-delay</strong>: 指定过渡动画开始前的延迟时间[citation:1]</li>
        </ul>
    </div>
</div>

<script>
    // 切换主题的函数
    function changeTheme(themeName) {
        // 获取body元素
        const body = document.body;

        // 移除所有现有的主题类
        body.classList.remove('theme-1', 'theme-2', 'theme-3', 'theme-4', 'theme-5', 'theme-6');

        // 添加新的主题类
        body.classList.add(themeName);

        // 更新页面标题，显示当前主题
        const themeNames = {
            'theme-1': '淡蓝主题',
            'theme-2': '淡粉主题',
            'theme-3': '淡绿主题',
            'theme-4': '淡橙主题',
            'theme-5': '淡紫主题',
            'theme-6': '淡灰主题'
        };

        document.title = `当前主题: ${themeNames[themeName]} - 背景色过渡示例`;
    }
</script>
</body>
</html>